<!--表单部件表单域校验规则生成器-->
<template>
  <div>
    <Dropdown @on-click="addRuleItem">
      <Button type="primary" size="small">
        添加校验规则
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(item, index) in rulesDropdownList" :key="index" :name="item.value">{{item.label}}</DropdownItem>
<!--        <DropdownItem name="number">数字</DropdownItem>
        <DropdownItem name="letter">字母</DropdownItem>
        <DropdownItem name="numberAndLetter">数字和字母</DropdownItem>
        <DropdownItem name="phone">手机号码</DropdownItem>
        <DropdownItem name="email">邮箱</DropdownItem>
        <DropdownItem name="chineseCharacter">仅中文字符</DropdownItem>
        <DropdownItem name="min">最小值校验</DropdownItem>
        <DropdownItem name="max">最大值校验</DropdownItem>
        <DropdownItem name="len">固定长度校验</DropdownItem>
        <DropdownItem name="pattern">正则表达式校验</DropdownItem>-->
      </DropdownMenu>
    </Dropdown>
    <div class="m-b-10px"></div>

    <Form :label-width="110">
      <Card v-for="(rule, index) in rules" :key="index">
        <p slot="title">{{ruleItemLabel(rule.rType)}}<span class="delete-v-btn" @click.stop="deleteRuleItem(index)"><Icon type="md-trash" /></span></p>
        <template v-if="rule.rType == 'require'">
          <FormItem label="校验目标数据类型">
            <Tooltip style="width: 100px;" content="如果校验目标是非字符串类型的数据，请记得切换，例如数字输入框的必填校验必须要切换此类型为数字" :max-width="200" placement="left">
              <Select :transfer="true" size="small" v-model="rule.type">
                <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </Tooltip>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="rule.message" placeholder=""/>
          </FormItem>
          <FormItem label="触发器">
            <Select size="small" v-model="rule.trigger">
              <Option v-for="item in triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </template>
        <template v-if="rule.rType == 'email'">
          <FormItem label="校验文案">
            <Input size="small" v-model="rule.message" placeholder=""/>
          </FormItem>
          <FormItem label="触发器">
            <Select size="small" v-model="rule.trigger">
              <Option v-for="item in triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </template>
        <template v-if="rule.rType == 'min'">
          <FormItem label="校验目标数据类型">
            <Select :transfer="true" size="small" v-model="rule.type">
              <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="最小值(最小长度)">
            <Tooltip content="如果校验目标数据类型为字符串、数组，那么最小值限制的是目标数据的length最小值" :max-width="200" placement="left">
              <InputNumber size="small" :max="100000" :min="-100000" v-model="rule.min" :active-change="false"></InputNumber>
            </Tooltip>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="rule.message" placeholder=""/>
          </FormItem>
          <FormItem label="触发器">
            <Select size="small" v-model="rule.trigger">
              <Option v-for="item in triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </template>
        <template v-if="rule.rType == 'max'">
          <FormItem label="校验目标数据类型">
            <Select :transfer="true" size="small" v-model="rule.type">
              <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="最大值(最大长度)">
            <Tooltip content="如果校验目标数据类型为字符串、数组，那么最大值限制的是目标数据的length最大值" :max-width="200" placement="left">
              <InputNumber size="small" :max="100000" :min="-100000" v-model="rule.max" :active-change="false"></InputNumber>
            </Tooltip>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="rule.message" placeholder=""/>
          </FormItem>
          <FormItem label="触发器">
            <Select size="small" v-model="rule.trigger">
              <Option v-for="item in triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </template>
        <template v-if="rule.rType == 'len'">
          <FormItem label="校验目标数据类型">
            <Select :transfer="true" size="small" v-model="rule.type">
              <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItem label="固定值(固定长度)">
            <InputNumber size="small" :max="100000" :min="0" v-model="rule.len" :active-change="false"></InputNumber>
          </FormItem>
          <FormItem label="校验文案">
            <Input size="small" v-model="rule.message" placeholder=""/>
          </FormItem>
          <FormItem label="触发器">
            <Select size="small" v-model="rule.trigger">
              <Option v-for="item in triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </template>
        <template v-if="rule.rType == 'pattern'">
          <FormItem label="校验目标数据类型">
            <Select :transfer="true" size="small" v-model="rule.type">
              <Option v-for="item in validateItemTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
          <FormItemPanel title="正则表达式">
            <Input type="textarea" :rows="4" size="small" v-model="rule.pattern" placeholder=""/>
          </FormItemPanel>
          <FormItem label="校验文案">
            <Input size="small" v-model="rule.message" placeholder=""/>
          </FormItem>
          <FormItem label="触发器">
            <Select size="small" v-model="rule.trigger">
              <Option v-for="item in triggers" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>
        </template>

      </Card>
    </Form>

    <p class="none-alert" style="font-size: 20px;" v-if="rules.length == 0">未添加校验规则</p>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: "FormItemRuleCreator",
  props: {
    value: {
      type: Array
    }
  },
  data() {
    return {
      rules: this.value,

      rulesDropdownList: [
        {label: '必填校验', value: 'require'},
        {label: '邮箱校验', value: 'email'},
        {label: '最小值(最小长度)校验', value: 'min'},
        {label: '最大值(最大长度)校验', value: 'max'},
        {label: '固定值(固定长度)校验', value: 'len'},
        {label: '正则表达式校验', value: 'pattern'},
      ],

      validateItemTypes: [
        {label: '字符串', value: 'string'},
        {label: '数字', value: 'number'},
        {label: '数组', value: 'array'},
        {label: '布尔值', value: 'boolean'}
      ],

      triggers: [
        {label: '失活后触发', value: 'blur'},
        {label: '值改变时触发', value: 'change'},
      ]
    }
  },
  mounted() {

  },
  methods: {
    addRuleItem(name) {
      if (_.find(this.rules, {rType: name})) {
        this.$Message.warning('已存在相同的校验规则')
        return
      }
      switch (name) {
        case 'require':
          this.rules.push({
            rType: name,
            type: 'string',
            required: true,
            message: '此项必须填写',
            trigger: 'blur'
          })
          break;
        case 'email':
          this.rules.push({
            rType: name,
            type: 'email',
            message: '必须为邮箱格式',
            trigger: 'blur'
          })
          break;
        case 'min':
          this.rules.push({
            rType: 'min',
            type: 'string',
            min: 0,
            message: '最少0个字',
            trigger: 'change'
          })
          break;
        case 'max':
          this.rules.push({
            rType: 'max',
            type: 'string',
            max: 1000,
            message: '最多1000个字',
            trigger: 'change'
          })
          break;
        case 'len':
          this.rules.push({
            rType: 'len',
            type: 'string',
            len: 10,
            message: '必须固定10个字',
            trigger: 'change'
          })
          break;
        case 'pattern':
          this.rules.push({
            rType: 'pattern',
            type: 'string',
            pattern: '',
            message: '不符合校验规则',
            trigger: 'change'
          })
          break;
      }
    },

    deleteRuleItem (index) {
      this.rules.splice(index, 1)
    },

    ruleItemLabel(rType) {
      return _.find(this.rulesDropdownList, (o)=>{return o.value == rType}).label
    }
  },
  computed: {

  },
  watch: {
    value(val) {
      this.rules = val;
    },
    rules(val) {
      this.$emit('input', val);
    }
  }
}
</script>

<style scoped>
>>> .ivu-card {
  margin-bottom: 10px;
}
>>> .ivu-card .ivu-card-head {
  padding: 5px 10px 5px 10px;
}
>>> .ivu-card .ivu-card-body {
  padding: 10px;
}

.delete-v-btn {
  float: right;
  cursor: pointer;
}
</style>
